<template>
    <div class="left_box_1">

        <div class="top_box">
            劳务人员现场数量统计
        </div>

        <!-- 出勤 -->
        <div class="left_box">
            <div class="left_box_item" v-for="(obj,index) in tabs" :key="index">
                <div>
                    <img :src=obj.url alt="">
                </div>
                <div class="left_box_item_title">
                    <div class="left_box_item_title_num">{{indexNumArr[index]}}</div>
                    <div class="left_box_item_title_txt">{{obj.txt}}</div>
                </div>
            </div>
        </div>

        <div class="right_box">
            <!-- tabs -->
            <div class="right_box_tab">
                <div @click="swithTabs(item,index)" v-for="(item,index) in indexs" :key="index" :class="[index == tabsInitNum ? 'active' : 'inactive']"> {{item.name}}</div>
            </div>

            <!-- echarts -->
            <div style="width: 100%; height: 100%;" ref="chart"></div>
        </div>

    </div>

</template>

<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/bar'); //按需引入 bar = 柱状图
export default {
    name: "index",
    data() {
        return {
            tabsInitNum: '2', // tabs初始化 - 按日
            indexNumArr: [],  // 指标数据集合
            // 指标集合
            tabs: [
                {
                    url: 'https://sp-1304930898.cos.ap-nanjing.myqcloud.com/zhgd/attendance.png',
                    num: '0',
                    txt: '出勤总人次'
                },
                {
                    url: 'https://sp-1304930898.cos.ap-nanjing.myqcloud.com/zhgd/onDuty.png',
                    num: '0',
                    txt: '在岗总人次'
                },
                {
                    url: 'https://sp-1304930898.cos.ap-nanjing.myqcloud.com/zhgd/rate.png',
                    num: '0',
                    txt: '平均出勤率'
                }
            ],
            // Tabs集合
            indexs: [
                {
                    name: '按月',
                    type: 'month'
                },
                {
                    name: '按周',
                    type: 'week'
                },
                {
                    name: '按日',
                    type: 'day'
                },
            ],
            // echarts配置数据
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'dashed',
                        lineStyle: {
                            opacity: 0,
                        },
                    },
                    backgroundColor: 'rgba(39,42,49,0.7)', //设置背景图片 rgba格式
                    borderColor: 'rgba(39,42,49,0.7)', //设置边框颜色
                    textStyle: {
                        color: "#fff" //设置文字颜色
                    },
                },
                grid: {
                    top: '10%',  // 组件离容器上侧的距离,百分比字符串或整型数字
                    left: '0%',    // 组件离容器左侧的距离,百分比字符串或整型数字
                    right: '0%',
                    bottom: '17%',
                    containLabel: true //grid 区域是否包含坐标轴的刻度标签，
                },
                legend: {
                    data: ['出勤总人数', '在岗总人数', '平均出勤率'],
                    textStyle: {
                        fontSize: 12,//字体大小
                        color: '#ffffff'//字体颜色
                    },
                    bottom: '7%'

                },
                dataZoom: [//滑动条
                    {
                        xAxisIndex: 0,//这里是从X轴的0刻度开始
                        show: true,//是否显示滑动条，不影响使用
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        height: 0,
                        endValue: 2, // 一次性展示6个。
                        bottom: '5%',
                        zoomLock: true,
                        borderColor: 'transparent',
                        // dataBackgroundObject: '#070f22',
                    }

                ],
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        color: '#D7D8DA',//字体颜色
                        axisPointer: {
                            type: 'shadow'
                        },
                        // x轴坐标颜色
                        axisLine: {
                            lineStyle: {
                                color: '#868C96',
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#414b5d'
                            }
                        },
                        type: 'value',
                        min: 0,
                        max: 0,
                        interval: 0,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitNumber: 1,
                        // x轴坐标颜色
                        axisLine: {
                            lineStyle: {
                                color: '#D7D8DA',
                            }
                        },
                    },
                    {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#414b5d'
                            }
                        },
                        type: 'value',
                        min: 0,
                        max: 35,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        // y轴坐标颜色
                        axisLine: {
                            lineStyle: {
                                color: '#D7D8DA',
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '出勤总人数',
                        type: 'bar',
                        barMaxWidth: 15,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: []
                    },
                    {
                        name: '在岗总人数',
                        type: 'bar',
                        barMaxWidth: 15,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: []
                    },
                    {
                        name: '平均出勤率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: []
                    }
                ]
            },
        };
    },
    methods: {
        // 切换日周月 - 初始化echarts配置
        clearSetting() {
            this.option.xAxis[0].data = []
            this.option.series[0].data = []
            this.option.series[1].data = []
            this.option.series[2].data = []
            this.option.yAxis[0].max = 0
            this.option.yAxis[0].interval = 0
            this.indexNumArr = []
        },

        // 初始化 - 获取数据
        async initData(type) {

            this.clearSetting()

            let req = { "type": type }
            let res = await new this.Request(this.Urls.m().projectsDataPerDay, this.$qs.stringify(req)).modepost();
            if (res.status == 200) {
                // 加载 - 指标数据
                this.indexNumArr.push(res.data.countData.chuqinNum)
                this.indexNumArr.push(res.data.countData.zaigangNum)
                this.indexNumArr.push(res.data.countData.pinjun)

                // 加载 - echarts数据
                res.data.data.forEach(item => {
                    if (type == "day") {
                        this.option.xAxis[0].data.push(item.dataTime)
                    }
                    if (type == "week") {
                        this.option.xAxis[0].data.push(item.numberWeeks)
                    }
                    if (type == "month") {
                        this.option.xAxis[0].data.push(item.dataTime)
                    }

                    this.option.series[0].data.push(item.chuqinNum)
                    this.option.series[1].data.push(item.zaigangNum)
                    this.option.series[2].data.push(item.pinjun)
                })

                // 加载 - 刻度值
                if (type == "day") {
                    this.option.yAxis[0].max = 20000
                    this.option.yAxis[0].interval = 2000
                }
                if (type == "week") {
                    this.option.yAxis[0].max = 70000
                    this.option.yAxis[0].interval = 10000
                }
                if (type == "month") {
                    this.option.yAxis[0].max = 350000
                    this.option.yAxis[0].interval = 50000
                }

                // console.log(this.option)
                this.initEcharts()
            }

        },

        // 初始化 - 获取数据 - 初始化echarts
        async initEcharts() {
            this.chart = Echarts.init(this.$refs.chart);
            this.chart.setOption(this.option);
        },

        // 切换tabs
        swithTabs(item, index) {
            this.tabsInitNum = index
            this.initData(item.type)
        }
    },

    mounted() {
        let type = 'day'
        this.initData(type)
    }
};
</script>

<style scoped="scoped">
.left_box_1 {
    border: 1px solid #258add;
    background-color: #04152e;
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}
.top_box {
    position: absolute;
    left: 30px;
    top: -10px;
    color: #03fafb;
    font-size: 15px;
    text-shadow: 0 0 0.5rem #00d8ff;
}
.left_box {
    margin: 10px 0px 10px 20px;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
}
.left_box_item {
    display: flex;
    align-items: center;
}
.left_box_item img {
    width: 35px;
    height: 35px;
}
.left_box_item_title {
    margin-left: 10px;
}
.left_box_item_title_num {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
.left_box_item_title_txt {
    font-size: 13px;
    color: #9ca1aa;
}

.right_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 80%;
    margin: 10px 30px 10px 60px;
}
.right_box_tab {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
}
.right_box_tab div {
    padding: 5px 7px;
    cursor: pointer;
}

.echarts {
    background-color: #04152e;
}
</style>
